<template>
	<h2 class="username" @click.stop="back">
		<span class="nickname">{{username}}</span>
	</h2>
</template>

<script type="text/javascript">
// eslint-disable-next-line
/* eslint-disable */
export default {
	name: 'username',
	props: {
		username: {
			type: String,
			default: "Ken"
		}
	},
	data() {
		return {

		}
	},
	methods: {
		back() {
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
@import "../../public/sass/var.scss";
.username{
	padding: 15px;
	text-align: center;
	color: $familycolor;
	background-color: $accountcolor;
	border-bottom: 1px solid $familycolor;
	.nickname{
		color: $btnbackgroundcolor;
		animation: changeshadow 1s  ease-in  infinite ;
    	/* 其它浏览器兼容性前缀 */
	    -webkit-animation: changeshadow 1s linear infinite;
	    -moz-animation: changeshadow 1s linear infinite;
	    -ms-animation: changeshadow 1s linear infinite;
	    -o-animation: changeshadow 1s linear infinite;
	}
}	
@keyframes changeshadow {  
    0%{ text-shadow: 0 0 4px #4cc134}  
    50%{ text-shadow: 0 0 40px #4cc134}  
    100%{ text-shadow: 0 0 4px #4cc134}  
}
/* 添加兼容性前缀 */
@-webkit-keyframes changeshadow {
  0%{ text-shadow: 0 0 4px #4cc134}  
  50%{ text-shadow: 0 0 40px #4cc134}  
  100%{ text-shadow: 0 0 4px #4cc134}  
}
@-moz-keyframes changeshadow {
    0%{ text-shadow: 0 0 4px #4cc134}  
    50%{ text-shadow: 0 0 40px #4cc134}  
    100%{ text-shadow: 0 0 4px #4cc134}  
}
@-ms-keyframes changeshadow {
    0%{ text-shadow: 0 0 4px #4cc134}  
    50%{ text-shadow: 0 0 40px #4cc134}  
    100%{ text-shadow: 0 0 4px #4cc134}  
}
@-o-keyframes changeshadow {
    0%{ text-shadow: 0 0 4px #4cc134}  
    50%{ text-shadow: 0 0 40px #4cc134}  
    100%{ text-shadow: 0 0 4px #4cc134}  
}	
</style>